<template>
  <div class="dashboard-editor-container">
    <el-row>
      <el-col :span="1.5" style="line-height: 36px; margin-right: 12px"
        >项目名称：</el-col
      >
      <el-col :span="12">
        <el-select
          v-model="project_id"
          placeholder="请选择"
          @change="getAllData"
        >
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
            style="margin-bottom: 20px"
          >
          </el-option> </el-select
      ></el-col>
    </el-row>

    <el-row
      style="
        background: #fff;
        padding: 16px 16px 0;
        margin-bottom: 32px;
        width: 100%;
        height: 400px;
      "
      id="head"
    >
    </el-row>

    <el-row :gutter="32">
      <el-col :xs="24" :sm="24" :lg="12">
        <div
          id="leftBottom"
          class="chart-wrapper"
          style="width: 100%; height: 400px"
        ></div>
      </el-col>
      <el-col :xs="24" :sm="24" :lg="12">
        <div
          id="left"
          class="chart-wrapper"
          style="width: 100%; height: 400px"
        ></div
      ></el-col>
    </el-row>
    <el-row>
      <el-col :xs="24" :sm="24" :lg="24">
        <div class="chart-wrapper">
          <div
            id="rightBottom"
            class="chart-wrapper"
            style="width: 100%; height: 600px"
          ></div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import * as echarts from "echarts";
import { getArticalData } from "../../../api/article";
import { getproject } from "../../../api/project";
export default {
  name: "DashboardAdmin",
  components: {},
  data() {
    return {
      moduleslist: [],
      projectlist: [],
      project_id: 1,
      options: [],
      value: "",
    };
  },
  methods: {
    async getData() {
      const res = await getArticalData({
        project_id: this.project_id,
        start_day: this.startDate,
        end_day: this.endDate,
        day_id: "",
      });
      this.moduleslist = res.moduleslist;
      this.placelist = res.placelist;
      var myChartHead = this.$echarts.init(document.getElementById("head"));
      let myChartLeft = this.$echarts.init(document.getElementById("left"));
      const posList = [
        "left",
        "right",
        "top",
        "bottom",
        "inside",
        "insideTop",
        "insideLeft",
        "insideRight",
        "insideBottom",
        "insideTopLeft",
        "insideTopRight",
        "insideBottomLeft",
        "insideBottomRight",
      ];
      app.configParameters = {
        rotate: {
          min: -90,
          max: 90,
        },
        align: {
          options: {
            left: "left",
            center: "center",
            right: "right",
          },
        },
        verticalAlign: {
          options: {
            top: "top",
            middle: "middle",
            bottom: "bottom",
          },
        },
        position: {
          options: posList.reduce(function (map, pos) {
            map[pos] = pos;
            return map;
          }, {}),
        },
        distance: {
          min: 0,
          max: 100,
        },
      };
      app.config = {
        rotate: 90,
        align: "left",
        verticalAlign: "middle",
        position: "insideBottom",
        distance: 15,
        onChange: function () {
          const labelOption = {
            rotate: app.config.rotate,
            align: app.config.align,
            verticalAlign: app.config.verticalAlign,
            position: app.config.position,
            distance: app.config.distance,
          };
          myChart.setOption({
            series: [
              {
                label: labelOption,
              },
              {
                label: labelOption,
              },
              {
                label: labelOption,
              },
              {
                label: labelOption,
              },
            ],
          });
        },
      };
      const labelOption = {
        show: true,
        position: app.config.position,
        distance: app.config.distance,
        align: app.config.align,
        verticalAlign: app.config.verticalAlign,
        rotate: app.config.rotate,
        formatter: "{c}  {name|{a}}",
        fontSize: 16,
        rich: {
          name: {},
        },
      };
      var moduleslist1 = JSON.parse(JSON.stringify(this.moduleslist));
      moduleslist1.map((res) => {
        var datalist = [];
        res.maindata.forEach((res) => {
          datalist.push(res.money);
        });
        res.data = datalist;
        res.label = labelOption;
        res.type = "bar";
        res.emphasis = {
          focus: res.name,
        };
      });
      var option = {
        title: {
          text: "各楼层汇总",
          left: "center",
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        legend: {
          data: ["Forest", "Steppe", "Desert", "Wetland"],
        },
        toolbox: {
          show: true,
          orient: "vertical",
          left: "right",
          top: "center",
          feature: {
            mark: { show: true },
            dataView: { show: true, readOnly: false },
            magicType: { show: true, type: ["bar", "stack"] },
            restore: { show: true },
            saveAsImage: { show: true },
          },
        },
        xAxis: [
          {
            type: "category",
            axisTick: { show: false },
            data: [
              ...this.placelist.map((res) => {
                return res.name;
              }),
            ],
          },
        ],
        yAxis: [
          {
            type: "value",
          },
        ],
        series: moduleslist1,
      };

      myChartHead.setOption(option);

      let leftList = [];
      moduleslist1[2].children.forEach((item) => {
        leftList.push({
          name: item.name,
          总金额: item.totalmoney,
          总数量: item.totalnum,
        });
      });

      let option1 = {
        title: {
          text: "甲分包工程", //主标题
        },
        legend: {},
        toolbox: {
          show: true,
          orient: "vertical",
          left: "right",
          top: "center",
          feature: {
            mark: { show: true },
            dataView: { show: true, readOnly: false },
            magicType: { show: true, type: ["line", "bar", "stack"] },
            restore: { show: true },
            saveAsImage: { show: true },
          },
        },
        tooltip: {},
        dataset: {
          dimensions: ["name", "总金额", "总数量"],
          source: leftList,
        },
        xAxis: { type: "category" },
        yAxis: {},
        series: [{ type: "bar" }, { type: "bar" }],
      };

      myChartLeft.setOption(option1);
      window.addEventListener("resize", function () {
        myChartHead.resize();
      });
      window.addEventListener("resize", function () {
        myChartLeft.resize();
      });
    },
    async getProject() {
      const data = await getproject();
      this.projectlist = data.data;
      this.options = data.data;

      this.options.map((res) => {
        res.label = res.name;
        res.value = res.id;
      });

      console.log(this.options);
    },
    // 左侧柱状图
    async getBar() {
      const res = await getArticalData({
        project_id: this.project_id,
        start_day: this.startDate,
        end_day: this.endDate,
        day_id: "",
      });
      let lineChactList = res;
      let title = lineChactList.moduleslist[0].name; // 标题
      let legendData = [];
      let xDataArr = [];
      let seriesDdta = [
        {
          name: "金额",
          type: "bar",
          barGap: 0,
          label: labelOption,
          emphasis: {
            focus: "series",
          },
          data: [],
        },
        // {
        //   name: "数量",
        //   type: "bar",
        //   barGap: 0,
        //   label: labelOption,
        //   emphasis: {
        //     focus: "series",
        //   },
        //   data: [],
        // },
      ];
      lineChactList.moduleslist[0].children.map((item) => {
        xDataArr.push(item.name);
        seriesDdta[0].data.push(item.totalmoney);
        // seriesDdta[1].data.push(item.totalnum);
      });
      var myChartLeftBottom = this.$echarts.init(
        document.getElementById("leftBottom")
      );
      const posList = [
        "left",
        "right",
        "top",
        "bottom",
        "inside",
        "insideTop",
        "insideLeft",
        "insideRight",
        "insideBottom",
        "insideTopLeft",
        "insideTopRight",
        "insideBottomLeft",
        "insideBottomRight",
      ];
      app.configParameters = {
        rotate: {
          min: -90,
          max: 90,
        },
        align: {
          options: {
            left: "left",
            center: "center",
            right: "right",
          },
        },
        verticalAlign: {
          options: {
            top: "top",
            middle: "middle",
            bottom: "bottom",
          },
        },
        position: {
          options: posList.reduce(function (map, pos) {
            map[pos] = pos;
            return map;
          }, {}),
        },
        distance: {
          min: 0,
          max: 100,
        },
      };
      app.config = {
        rotate: 90,
        align: "left",
        verticalAlign: "middle",
        position: "insideBottom",
        distance: 15,
        onChange: function () {
          const labelOption = {
            rotate: app.config.rotate,
            align: app.config.align,
            verticalAlign: app.config.verticalAlign,
            position: app.config.position,
            distance: app.config.distance,
          };
          myChart.setOption({
            series: [
              {
                label: labelOption,
              },
              {
                label: labelOption,
              },
              {
                label: labelOption,
              },
              {
                label: labelOption,
              },
            ],
          });
        },
      };
      const labelOption = {
        show: true,
        position: app.config.position,
        distance: app.config.distance,
        align: app.config.align,
        verticalAlign: app.config.verticalAlign,
        rotate: app.config.rotate,
        formatter: "{c}  {name|{a}}",
        fontSize: 16,
        rich: {
          name: {},
        },
      };
      let option = {
        title: {
          text: title,
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        legend: {
          data: ["金额"],
          // data: ["金额", "数量"],
        },
        toolbox: {
          show: true,
          orient: "vertical",
          left: "right",
          top: "center",
          feature: {
            mark: { show: true },
            dataView: { show: true, readOnly: false },
            magicType: { show: true, type: ["line", "bar", "stack"] },
            restore: { show: true },
            saveAsImage: { show: true },
          },
        },
        xAxis: [
          {
            type: "category",
            axisTick: { show: false },
            data: xDataArr,
          },
        ],
        yAxis: [
          {
            type: "value",
          },
        ],
        series: seriesDdta,
      };
      // 使用刚指定的配置项和数据显示图表。
      myChartLeftBottom.setOption(option);
      window.addEventListener("resize", function () {
        myChartLeftBottom.resize();
      });
    },

    // 饼图
    async getPie() {
      const res = await getArticalData({
        project_id: this.project_id,
        start_day: this.startDate,
        end_day: this.endDate,
        day_id: "",
      });
      let pieChactList = res;
      let title = pieChactList.moduleslist[1].name; // 标题
      let outer_legendData = []; // 图例
      let outer_seriesDdta = []; // 数据
      let inner_legendData = [];
      let inner_seriesDdta = [];
      pieChactList.moduleslist[1].maindata.map((item, index) => {
        if (item.money > 0) {
          inner_legendData.push();
          inner_seriesDdta.push({
            name: index + 5 + "楼",
            value: item.money,
          });
        }
      });
      pieChactList.moduleslist[1].children.map((item) => {
        outer_legendData.push(item.name);
        outer_seriesDdta.push({
          name: item.name,
          value: item.totalmoney,
        });
      });
      console.log(outer_seriesDdta, "outer");
      var myChartRightBottom = this.$echarts.init(
        document.getElementById("rightBottom")
      );

      let option = {
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b}: {c} ({d}%)",
        },
        legend: [
          {
            x: "left",
            textStyle: { padding: [11, 0, 11, 0] },
            orient: "vertical",
            data: outer_legendData.slice(
              0,
              Math.ceil(outer_legendData.length / 2)
            ),
          },
          {
            x: "right",
            textStyle: { padding: [11, 0, 11, 0] },
            orient: "vertical",
            data: outer_legendData.slice(
              -Math.ceil(outer_legendData.length / 2)
            ),
          },
        ],
        series: [
          {
            name: "楼层金额汇总",
            type: "pie",
            selectedMode: "single",
            radius: [0, "30%"],
            label: {
              position: "inner",
              fontSize: 14,
            },
            labelLine: {
              show: false,
            },
            data: inner_seriesDdta,
          },
          {
            name: "二级分类汇总",
            type: "pie",
            radius: ["45%", "65%"],
            labelLine: {
              length: 30,
            },
            label: {
              formatter: "{a|{a}}{abg|}\n{hr|}\n  {b|{b}：}{c}  {per|{d}%}  ",
              backgroundColor: "#F6F8FC",
              borderColor: "#8C8D8E",
              borderWidth: 1,
              borderRadius: 4,
              rich: {
                a: {
                  color: "#6E7079",
                  lineHeight: 22,
                  align: "center",
                },
                hr: {
                  borderColor: "#8C8D8E",
                  width: "100%",
                  borderWidth: 1,
                  height: 0,
                },
                b: {
                  color: "#4C5058",
                  fontSize: 14,
                  fontWeight: "bold",
                  lineHeight: 33,
                },
                per: {
                  color: "#fff",
                  backgroundColor: "#4C5058",
                  padding: [3, 4],
                  borderRadius: 4,
                },
              },
            },
            data: outer_seriesDdta,
          },
        ],
      };
      // 使用刚指定的配置项和数据显示图表。
      myChartRightBottom.setOption(option);
      window.addEventListener("resize", function () {
        myChartRightBottom.resize();
      });
    },
    getAllData() {
      this.getData();
      this.getPie();
      this.getBar();
    },
  },
  mounted() {
    this.getProject();
    this.getAllData();
    // 基于准备好的dom，初始化echarts实例
  },
};
</script>

<style lang="scss" scoped>
.dashboard-editor-container {
  padding: 32px;
  background-color: rgb(240, 242, 245);
  position: relative;

  .github-corner {
    position: absolute;
    top: 0px;
    border: 0;
    right: 0;
  }

  .chart-wrapper {
    background: #fff;
    padding: 16px 16px 0;
    margin-bottom: 32px;
  }
}
.el-select {
  margin-bottom: 20px;
}

@media (max-width: 1024px) {
  .chart-wrapper {
    padding: 8px;
  }
}
</style>
